<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app" style="margin-top: 150px;margin-left: 200px; margin-right: 200px">
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="数据搜索" name="first">
            <div>
                <el-input style="width: 60%" placeholder="请输入url" v-model="inputData">
                    <template slot="prepend">Http://</template>
                </el-input>
                <el-button type="primary" :loading="loading" icon="el-icon-search" @click="search">搜索</el-button>
            </div>
            <el-divider style="width: 70%;"></el-divider>
            <el-table
                    :data="tableData"
                    stripe
                    style="width: 70%; margin-top: 10px;">
                <el-table-column
                        label="结果"
                        width="700px">
                    <template slot-scope="scope">
                        <el-tag>{{scope.row}}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button size="mini" type="success" @click="saveKey(scope.row)">保存</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-tab-pane>
        <el-tab-pane label="数据查看" name="second">
            <el-table
                    :data="pageTableData"
                    stripe
                    style="width: 100%; margin-top: 10px;">
                <el-table-column
                        label="关键词"
                        width="700px">
                    <template slot-scope="scope">
                        <el-tag>{{scope.row.keyName}}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="keyWord"
                        label="标注"
                        width="100px">
                </el-table-column>
                <el-table-column
                        label="状态"
                        width="90px">
                    <template slot-scope="scope">
                        <el-tag type="success" v-if="scope.row.status">已标记</el-tag>
                        <el-tag type="primary" v-else>未标记</el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="createTime"
                        label="添加时间"
                        width="180px">
                </el-table-column>
                <el-table-column
                        label="操作">
                    <template slot-scope="scope">
                        <el-button size="mini" type="danger" @click="deleteKey(scope.row.keyName)">删除</el-button>
                        <el-button v-if="!scope.row.status" size="mini" type="success" icon="el-icon-check" @click="sign(scope.row.id)" circle></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    style="margin-top: 10px;"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :page-sizes="[10, 20, 50, 100]"
                    :page-size="page.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="page.total">
            </el-pagination>
        </el-tab-pane>
    </el-tabs>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                inputData: '',
                tableData: [],
                visible: false,
                loading: false,
                activeName: 'first',

                // 分页
                page: {
                    pageSize: 10,
                    currentPage: 1,
                    total: 0,
                },
                pageTableData: [],
                word: ''
            }
        },
        mounted() {
            this.getAllKeys();
        },
        methods: {
            // 搜索
            search() {
                if ('' === this.inputData) {
                    this.$message.error('搜索框不可为空哦!╮(╯_╰)╭');
                    return;
                }
                axios.get('/alibaba?url=' + this.inputData).then(resp => {
                    console.info(resp);
                    if (resp) {
                        this.$message({
                            message: '成功搜索到数据!',
                            type: 'success'
                        });
                        this.tableData = resp.data.data;
                    } else {
                        this.$message.error('噢哦，请求失败!请再次尝试!╮(╯_╰)╭' + resp.data.msg);
                    }
                })
            },
            // 保存
            saveKey(key) {
                if (this.word === '' || this.word === null){
                    this.word = '';
                }
                console.info(key);
                axios.post('/save/?key=' + key + '&word=' + this.word).then(resp => {
                    if (resp.data.status === 200) {
                        this.$message({
                            message: '成功保存数据!',
                            type: 'success'
                        });
                    } else {
                        this.$message.error("error!" + resp.data.msg);
                    }
                })
            },
            // 获取所有的key
            getAllKeys() {
                axios.get('/key?page='+this.page.currentPage+'&pageSize='+this.page.pageSize).then(resp => {
                    if (resp.data.status === 200) {
                        this.pageTableData = resp.data.data.result;
                        this.page.total = resp.data.data.total;
                    } else {
                        this.$message.error('噢哦，请求失败!请再次尝试!╮(╯_╰)╭');
                    }
                })
            },
            // 更换tab
            handleClick(tab, event) {
                this.getAllKeys();
            },
            // 删除key
            deleteKey(key) {
                this.$confirm('此操作将永久删除【' + key + '】, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.post('/delete/' + key).then(resp => {
                        if (resp.data.status === 200) {
                            this.$message({
                                message: '删除成功!',
                                type: 'success'
                            });
                            this.getAllKeys();
                        } else {
                            this.$message.error('哦豁，删除失败!请稍后再试!╮(╯_╰)╭');
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            // 标记
            sign(id){
                axios.put('/update/' + id).then(resp => {
                    if (resp.data.status === 200){
                        this.$message({
                            message: '标记成功!',
                            type: 'success'
                        });
                        // this.tableData[index].status = true;
                        this.getAllKeys();
                    }else {
                        this.$message.error('哦豁，操作失败!请稍后再试!╮(╯_╰)╭');
                    }
                })
            },
            // 改变分页大小
            handleSizeChange:function (pageSize) {
                console.info('当前页:', this.page.currentPage);
                console.info('当前页大小:', pageSize);
                this.page.pageSize = pageSize;
                this.getAllKeys();
            },
            // 改变当前页数
            handleCurrentChange:function (currentPage) {
                console.info('当前页:', currentPage);
                console.info('当前页大小:', this.page.pageSize);
                this.page.currentPage = currentPage;
                this.getAllKeys();
            }
        }
    })
</script>
</html>